<template>
  <div style="height: 100%">
  </div>
</template>

<script>
  import Format from '@/utils/format'
  import EchartsMixins from '../echarts.mixins'

  export default {
    mixins: [EchartsMixins],
    data() {
      return {
        charts: '',
        valueList: [],
        // 监测点名称
        monitorName: '',
      }
    },
    computed: {
      options() {
        let that = this
        const Echarts = require('echarts')
        return {
          holeDepth: 0,
          title: {
            text: this.monitorName + '地下水位曲线图',
            x: 'center',
            align: 'right'
          },
          grid: {
            left: '70px',
            right: '80px',
            bottom: '80px'
          },
          toolbox: {
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              restore: {},
              saveAsImage: {}
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',

              label: {
                backgroundColor: '#505765'
              }
            },
            formatter: function (params, ticket, callback) {
              var contentArr = []
              for (var i = 0; i < params.length; i++) {
                var data = params[i]
                if (i === 0) {
                  contentArr.push(Format(new Date(data.value[0])))
                }
                contentArr.push(data.marker + '水位：' + (that.holeDepth - data.value[1]).toFixed(2) + 'm')
              }
              return contentArr.join('<br/>')
            }
          },
          dataZoom: [
            {
              show: true,
              realtime: true,
              handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
              handleSize: '80%',
              handleStyle: {
                color: '#fff',
                shadowBlur: 3,
                shadowColor: 'rgba(0, 0, 0, 0.6)',
                shadowOffsetX: 2,
                shadowOffsetY: 2
              },
              xAxisIndex: [0], // 确保这个 dataZoom 控制的是 X 轴
            },
            {
              // 内置的 X 轴缩放，可以用鼠标滚轮操作
              type: 'inside',
              xAxisIndex: [0], // 明确指定这个 dataZoom 控件控制哪个 X 轴
            },
          ],

          xAxis: {
            splitLine: {
              show: false
            },
            type: 'time',
            boundaryGap: false,
            axisLine: {onZero: false},
            axisLabel: { // 坐标轴标签样式设置
              showMaxLabel:true,
              formatter: function (value, index) { // 坐标轴文字展示样式处理
                return Echarts.format.formatTime('yyyy-MM-dd', new Date(value))
              },
            }
          },
          yAxis: {
            max: this.holeDepth,
            name: '孔深(m)',
            type: 'value',
            axisLabel: { // 坐标轴标签样式设置
              formatter: function (value, index) { // 坐标轴文字展示样式处理
                return (that.holeDepth - value).toFixed(1)
              },
            }
          },
          series: this.createSeries(
            [{
              name: this.monitorName,
              type: 'line',
              animation: true,
              smooth: true,
              symbol: 'none',
              symbolSize: 4,
              data: this.valueList
            }], this.holeDepth)
        }
      }
    },
    methods: {
      setWarningLine() {
      },
      updateEchart(data, monitorName, holeDepth) {
        this.monitorName = monitorName
        this.holeDepth = holeDepth
        this.valueList = data.realValue;
        this.charts.setOption(this.options)
        this.charts.resize()
      },
      createSeries(serverData, holeDepth) {
        let that = this
        const Echarts = require('echarts')
        // 如果没传递drillingDepth参数，就从yAxis中获取
        if (typeof (holeDepth) === 'undefined') {
          holeDepth = 0
        }
        var datalist = []
        for (var i = 0; i < serverData.length; i++) {
          var sss = {
            name: serverData[i].name,
            type: 'line',
            smooth: true,
            symbol: 'none',
            itemStyle: {
              normal: {
                color: '#00f2fd'
              }
            },
            areaStyle: {
              normal: {
                color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0.3, color: '#00f2fd' // 0% 处的颜色
                  }, {
                    offset: 0.8, color: '#1c85ff' // 100% 处的颜色
                  }, {
                    offset: 1, color: '#0600ff' // 100% 处的颜色
                  }]
                )
              }
            },
            data: serverData[i].data,
            markLine: {
              data: [

                {
                  type: 'average',
                  lineStyle: {
                    color: 'rgb(56, 94, 19)',
                    width: 1
                  },
                  label: {
                    normal: {
                      position: 'insideEndTop',
                      formatter: function (data, index) { // 坐标轴文字展示样式处理
                        return '平均水位:' + (that.holeDepth - data.value).toFixed(2) + 'm'
                      },
                    }
                  },
                },
              ]
            },
            markPoint: {
              symbolSize: 80,
              data: [
                {
                  type: 'max', name: 'Max', itemStyle: {
                    color: '#9d2002'
                  }
                },
                {
                  type: 'min', name: 'Min', itemStyle: {
                    color: '#006fff'
                  }
                }
              ],
              label: {
                position: "inside",
                distance: 7,
                formatter: function (data) {
                  if (data.name === 'Max') {
                    return '最高水位\n' + (that.holeDepth - data.value).toFixed(2) + 'm'
                  }
                  return '最低水位\n' + (that.holeDepth - data.value).toFixed(2) + 'm'
                }
              },
            },
          }
          datalist.push(sss)
        }
        return datalist
      }
    },
  }
</script>
